// 档案持卡人人数情况 图表
var echartsPro = echarts.init(document.getElementById("echartsPro"));
echartsPro.setOption({
    // backgroundColor: '#0a1d53',
    grid: {
        left: '4%',
        top: '2%',
        right: '8%',
        bottom: '2%',
        containLabel: true
    },
    // tooltip: {
    //     trigger: 'item',
    //     axisPointer: {
    //         // 坐标轴指示器，坐标轴触发有效
    //         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //     }
    // },
    // textStyle: {
    //     color: '#fff'
    // },
    xAxis: {
        show: false,
        type: 'value',
        // 设置x轴显示几段
        min: 0,
        max: 100,
        // inverse: true,
        splitLine: {
            show: false
        },
        interval: 50
    },
    yAxis: {
        show: true,
        type: 'category',
        data: [
            '养老\n助残卡',
            '民政\n一卡通',
            '残疾人\n一卡通',
            '特殊家庭\n扶持卡',
            '军人\n保障卡',
            '第三代\n社保卡'
        ],
        axisTick: { show: false },
        axisLine: {
            show: false,
            lineStyle: {
                color: '#999999'
            }
        },
        splitLine: {
            show: false
        },
        inside: true,
    },
    series: [
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#fafafa', // 定义柱形的背景色
                    barBorderRadius: [20, 20, 20, 20] // 定义背景柱形的圆角
                }
            },
            barGap: '-100%', // 设置柱形重合的重要步骤
            data: [100, 100, 100, 100, 100, 100, 100],
            z: 0,
            silent: true,
            animation: false, // 关闭动画效果
            barWidth: '18px' // 设置柱形宽度
        },
        {
            type: 'bar',
            data: [50, 50, 50, 50, 50, 50, 50],
            barWidth: '18px',
            barGap: '-100%', // 设置柱形重合的重要步骤
            label: {
                normal: {
                    show: true, //是否显现，不显示的话设置成false
                    position: "right", //显示的位置
                    distance: 10, //距离侄子的值 // label要显示的值比如： 20%
                    offset: [0, 2],
                    formatter: function (param) {
                        return param.value;
                    },
                    textStyle: {
                        //这个地方颜色是支持回调函数的这种的，如果是一种颜色则可以写成： color :'#1089E7'
                        color: '#999999',
                        fontSize: "14"
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#a0d971',
                    barBorderRadius: [20, 20, 20, 20] // 定义柱形的圆角
                }
            }
        }
    ]
});



// 年度资金发放人数和资金变化情况 图表
var echartsLine = echarts.init(document.getElementById("echartsLine"))
echartsLine.setOption({
    color: ['#9de1fd', '#fec11c'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            label: {
                show: true,
                backgroundColor: '#656565',
                borderRadius: 4,
                shadowColor: '#fff',
            },
            lineStyle: {
                color: '#dce2e8',
                type: 'dashed'

            }
        }
    },
    legend: {
        // icon:'diamond',
        right: 140,
        data: ['发放人数', '发放资金']
    },
    grid: {
        left: '4%',
        right: '5%',
        bottom: '8%',
        top: '12%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLine: {					//---坐标轴 轴线
                show: true,					//---是否显示
                //------------------- 线 -------------------------
                lineStyle: {
                    color: '#e5e5e5',
                    width: 1,
                    type: 'solid',
                },
            },
            axisTick: {					//---坐标轴 刻度
                show: false,
            },
            axisLabel: {					//---坐标轴 标签
                show: true,					//---是否显示
                // inside:false,				//---是否朝内
                // rotate:0,					//---旋转角度	
                margin: 10,					//---刻度标签与轴线之间的距离
                color: '#999999',				//---默认取轴线的颜色
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: {					//---坐标轴 轴线
                show: false,
            },
            axisTick: {					//---坐标轴 刻度
                show: false,
            },
            axisLabel: {					//---坐标轴 标签
                // show:true,	
                color: '#999999',				//---默认取轴线的颜色
            },
            splitLine: {					//---grid 区域中的分隔线
                show: true,					//---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
                lineStyle: {
                    color: '#e5e5e5',
                    width: 1,
                    type: 'solid',			//---类型
                },
            },
        }
    ],
    series: [
        {
            name: '发放资金',
            type: 'line',
            stack: '总量',
            // smooth: true,
            symbolSize: 8,//拐点大小
            areaStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(157,225,253,0.4)' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(157,225,253,0)' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                }
            },
            itemStyle: {
                normal: {
                    // 拐点上显示数值
                    // label: {
                    //     show: true
                    // },
                    // borderColor: 'red',  // 拐点边框颜色
                    lineStyle: {
                        width: 2,  // 设置线宽
                        type: 'solid'  //'dotted'虚线 'solid'实线
                    }
                }
            },
            data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
        },
        {
            name: '发放人数',
            type: 'line',
            symbolSize: 8,//拐点大小
            // symbol:'circle',
            areaStyle: {
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(254,194,30,0.4)' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(254,194,30,0)' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                }
            },
            // smooth: true,
            itemStyle: {
                normal: {
                    // 拐点上显示数值
                    // label: {
                    //     show: true
                    // },
                    // borderColor: 'red',  // 拐点边框颜色
                    lineStyle: {
                        width: 2,  // 设置线宽
                        type: 'solid'  //'dotted'虚线 'solid'实线
                    }
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310]
        }
    ]
})
// 预警提示情况 图表
var echartsRad = echarts.init(document.getElementById("echartsRad"))
echartsRad.setOption({
    tooltip: {},
    radar: {
        center: ['50%', '45%'],
        radius: 90,
        splitNumber: 5, // 雷达图圈数设置
        name: {
            textStyle: {
                color: '#999999',
                // backgroundColor: '#999',
                // borderRadius: 3,
                // padding: [3, 5]
            }
        },
        // 设置雷达图中间射线的颜色
        axisLine: {
            lineStyle: {
                color: '#c4c4c4',
            },
        },
        // splitArea: {
        //     show: true,
        //     areaStyle: {
        //         color: 'rgba(151,249,93,1)', // 图表背景的颜色
        //     },
        // },
        indicator: [
            { name: '救助预警', max: 6500 },
            { name: '身份预警', max: 16000 },
            { name: '死亡预警', max: 30000 },
            { name: '年龄预警', max: 38000 }
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
        symbolSize: 5, // 拐点的大小
        itemStyle: { // 单个拐点标志的样式设置。
            normal: {
                borderColor: 'rgba(151,249,93,1)',
                // 拐点的描边颜色。[ default: '#000' ]
                borderWidth: 2,
                // 拐点的描边宽度，默认不描边。[ default: 0 ]
            }
        },
        lineStyle: { // 单项线条样式。
            normal: {
                opacity: 0.5, // 图形透明度
                color: 'rgba(151,249,93,1)'
            }
        },
        areaStyle: { // 单项区域填充样式
            normal: {
                color: 'rgba(151,249,93,1)' // 填充的颜色。[ default: "#000" ]
            }
        },
        data: [
            {
                value: [4300, 10000, 28000, 35000],
                name: '预算分配（Allocated Budget）'
            }
        ]
    }]
})

// 高龄津贴老人档案年龄分布情况 图表
var echartsPie = echarts.init(document.getElementById("echartsPie"))
echartsPie.setOption({
    // tooltip: {
    //     trigger: 'item',
    //     formatter: '{a} <br/>{b}: {c} ({d}%)'
    // },
    color: ['#fec11c', '#a0d971', '#9de1fd'],
    legend: {
        orient: 'horizontal',
        left: 'center',
        bottom: 15,
        itemWidth: 6,   // 设置图例图形的宽
        itemHeight: 42,  // 设置图例图形的高
        itemGap: 30,
        // data: ['直接访问', '邮件营销', '联盟广告']
        formatter: function (name) {
            let data = [
                { value: 335, name: '80-89岁' },
                { value: 310, name: '90-99岁' },
                { value: 234, name: '百岁以上老人' }
            ]
            let target;
            for (let i = 0; i < data.length; i++) {
                if (data[i].name === name) {
                    target = data[i].value
                }
            }
            let arr = ["{a|" + target + "}{b|人}", "{b|" + name + "}"]
            return arr.join("\n")
        },
        textStyle: {
            rich: {
                a: {
                    fontSize: 24,
                    fontWeight: 'bold',
                    color: "#070503",
                    padding: [6, 0, 0, 0]
                },
                b: {
                    fontSize: 12,
                    color: "#999999"
                }
            }
        }
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '36%'],
            avoidLabelOverlap: false,
            itemStyle: {
                normal: {
                    borderWidth: 8,
                    borderColor: '#fff',
                }
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: function (e) {
                        console.log(e.value)
                        return "{a|" + e.value + "}{b|人}"
                    },
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 28,
                                fontWeight: 'bold',
                                color: "#070503",
                                padding: [6, 0, 0, 0],
                                fontFamily: 'Microsoft YaHei'
                            },
                            b: {
                                fontSize: 12,
                                color: "#999999",
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    }
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 335, name: '80-89岁' },
                { value: 310, name: '90-99岁' },
                { value: 234, name: '百岁以上老人' },
            ]
        }
    ]
})



// 失能护理补贴人员档案分布情况	 图表
var echartsBar = echarts.init(document.getElementById("echartsBar"))
echartsBar.setOption({
    grid: {
        left: '4%',
        right: '4%',
        bottom: '8%',
        top: '12%',
        containLabel: true
    },
    xAxis: {
        axisLine: {					//---坐标轴 轴线
            show: true,					//---是否显示
            //------------------- 线 -------------------------
            lineStyle: {
                color: '#e5e5e5',
                width: 1,
                type: 'solid',
            },
        },
        axisTick: {					//---坐标轴 刻度
            show: false,
        },
        axisLabel: {					//---坐标轴 标签
            show: true,					//---是否显示
            // inside:false,				//---是否朝内
            // rotate:0,					//---旋转角度	
            margin: 10,					//---刻度标签与轴线之间的距离
            color: '#999999',				//---默认取轴线的颜色
        },
        data: ['极重度失能', '重度残疾', '一二级听力言语 ']
    },
    yAxis: {
        type: 'value',
        axisLine: {					//---坐标轴 轴线
            show: false,
        },
        axisTick: {					//---坐标轴 刻度
            show: false,
        },
        axisLabel: {					//---坐标轴 标签
            // show:true,	
            color: '#999999',				//---默认取轴线的颜色
        },
        splitLine: {					//---grid 区域中的分隔线
            show: true,					//---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
            lineStyle: {
                color: '#e5e5e5',
                width: 1,
                type: 'solid',			//---类型
            },
        },

    },
    series: [{
        data: [120, 200, 150],
        type: 'bar',
        barWidth: '35',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(254, 193, 28, 0)'
        },
        label: {						//---图形上的文本标签
            show: true,
            position: 'outside',	//---相对位置
            rotate: 0,				//---旋转角度
            color: '#999999',
            formatter: '总量：{c}'
        },
        itemStyle: {					//---图形形状
            color: 'rgba(254, 193, 28, 1)',
            // barBorderRadius: [18, 18, 0, 0],
        },
    }]
})



// 养老服务补贴人员档案分布情况 图表
var echartsPieSimble = echarts.init(document.getElementById("echartsPieSimble"))
echartsPieSimble.setOption({
    color: ['#9de1fd', '#a0d971', '#fec11c'],
    legend: {
        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
        orient: 'horizontal',
        // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
        x: 'center',
        // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
        // y: 'bottom',
        bottom: 12,
        itemWidth: 7,   // 设置图例图形的宽
        itemHeight: 14,  // 设置图例图形的高
        textStyle: {
            fontSize: 12,
            color: '#999999'  // 图例文字颜色
        },
        // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
        itemGap: 20,
        data: ['计生家庭', '低收入', '低保']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '66%',
            center: ['50%', '40%'],
            data: [
                { value: 335, name: '计生家庭' },
                { value: 310, name: '低收入' },
                { value: 234, name: '低保' }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 10,
                    borderColor: '#fff',
                },
                // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                // emphasis: {
                //     shadowBlur: 15,
                //     shadowOffsetX: 3,
                //     shadowColor: 'rgba(30, 144, 255,0.3)'
                // }
            },
            labelLine: {
                normal: {
                    show: true,   // show设置线是否显示，默认为true，可选值：true ¦ false
                    lineStyle: {
                        color: '#787878'
                    },
                    // smooth: 0.2,
                    // length:80
                    length: 20,
                    length2: 20
                }
            },
            label: {
                color: "rgba(153,153,153,1)",
                fontSize: 12,
                formatter: '{b}\n({c})'
            }
        }
    ]
})